<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide class="swiper-slide">
        <router-link to="path">
          <img src="https://easytuan.gitee.io/node-elm-api/public/banner/4a6f8262a2a006c0bd6ba31b137c4jpeg.png"
               alt="" /></router-link>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <router-link to="path">
          <img src="https://easytuan.gitee.io/node-elm-api/public/banner/b28f567a846a21f01aa39a55d6facjpeg.png"
               alt="" /></router-link>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <router-link to="path">
          <img src="https://easytuan.gitee.io/node-elm-api/public/banner/146be328e7121c456ac67f54b59fbjpeg.png"
               alt="" /></router-link>
      </swiper-slide> 
      <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
   
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  data () {
    return {
      swiperOption: {
        //显示分页
        pagination: {
          el: ".swiper-pagination"
        },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        //自动轮播
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: true
        },
        //开启循环模式
        loop: true
      }
    };
  }
};
</script>

<style lang="less">
.swiper {
  width: 93%;
  margin: 0 auto;
 
  img {
    width: 100%;
  }
  .swiper-slide {
    width: 100%;
    display: flex;

    img {
      width: 100%;
     
    }
  }
}
</style>
